<template>
  <!-- 对话框配置项: 关闭时销毁-->
  <el-dialog
    v-model="dialogs.event.report"
    title="交通事件上报"
    destroy-on-close
    center
    width="40%"
  >
    <!-- 表单输入项 -->
    <el-form
      ref="formRef"
      :model="eventForm"
      :rules="rules"
      label-width="25%"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="事件类型" prop="type">
        <el-select v-model="eventForm.type" placeholder="请选择事件类型">
          <el-option label="碾压" value="碾压" />
          <el-option label="翻车" value="翻车" />
          <el-option label="失火" value="失火" />
          <el-option label="刮蹭" value="刮蹭" />
          <el-option label="碰撞" value="碰撞" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-form-item>
      <el-form-item label="发生地点" prop="site">
        <el-autocomplete
          v-model="eventForm.site"
          :fetch-suggestions="querySearch"
          placeholder="请输入发生地点"
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item label="发生时间" prop="datetime">
        <el-date-picker
          v-model="eventForm.datetime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择发生时间"
        />
      </el-form-item>
      <el-form-item label="事件描述" prop="describe">
        <el-input
          v-model="eventForm.describe"
          type="textarea"
          :rows="5"
          placeholder="请具体描述发生的事件"
        />
      </el-form-item>
      <el-form-item label="事件车辆">
        <el-input
          v-model="eventForm.car"
          placeholder="请输入事件相关车辆的车牌号"
        />
      </el-form-item>
    </el-form>
    <!-- 提交和清空 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClear">清空</el-button>
        <el-button type="primary" @click="handleSubmit(formRef)">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import otherApi from '@/apis/otherApi.js' // 导入封装好的API
import eventApi from '@/apis/event.js' // 导入封装好的API
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useUserStore } from '@/stores/user' // 使用pinia
const { dialogs } = useDialogsStore()
const { user } = useUserStore()

const formRef = ref()

// 表单输入的数据
const eventForm = reactive({
  type: '',
  site: '',
  datetime: '',
  describe: '',
  car: ''
})
// 地点详情的数据
const site = reactive({
  addr: '',
  position: ''
})

// 表单验证规则
const rules = reactive({
  type: [
    {
      required: true,
      message: '事件类型不能为空!',
      trigger: 'change'
    }
  ],
  site: [
    {
      required: true,
      message: '发生地点不能为空!',
      trigger: 'blur'
    }
  ],
  datetime: [
    {
      required: true,
      message: '发生时间不能为空!',
      trigger: 'change'
    }
  ],
  describe: [
    {
      required: true,
      message: '事件描述不能为空!',
      trigger: 'blur'
    },
    { min: 10, max: 50, message: '字数必须为10~50字', trigger: 'blur' }
  ]
})

// 范围搜索地点
let timeout // 防抖
const querySearch = (queryString, cb) => {
  const pois = []
  clearTimeout(timeout)
  timeout = setTimeout(async () => {
    if (queryString) {
      const res = await otherApi.getSiteByPolygon(queryString)
      res.data.pois.forEach((item) => {
        pois.push({ value: item.address, coordinate: item.lonlat })
      })
    }
    const results = queryString ? pois : [{ value: '<空>' }]
    cb(results)
  }, 1000)
}

// 选择地点
const handleSelect = (item) => {
  site.addr = item.value
  site.position = item.coordinate
}

// 清空表单
const handleClear = () => {
  for (const key in eventForm) {
    eventForm[key] = ''
  }
}
// 提交表单
const handleSubmit = (formEl) => {
  const submitData = {
    user_id: user.id,
    event_number: 'sj' + new Date().getTime(),
    event_type: eventForm.type,
    event_addr: site.addr,
    event_location: site.position,
    event_datetime: String(eventForm.datetime),
    event_describe: eventForm.describe,
    event_car: eventForm.car
  }
  // 提交验证
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      // 表单全部验证成功
      const res = await eventApi.postEvent(submitData)
      if (res.code == 0) {
        ElMessage({
          showClose: true,
          message: '事件上报失败!',
          type: 'error'
        })
      } else {
        dialogs.event.report = false
        ElMessage({
          showClose: true,
          message: '事件上报成功!',
          type: 'success'
        })
      }
    } else {
      // 表单全部验证失败
      return false
    }
  })
}

onMounted(() => {})
</script>

<style scoped></style>
